<template>
  <BasicModal v-bind="$attrs" @register="register" :title="getTitle" width="1000px">
    <a-spin :spinning="loading" size="large" tip="Loading...">
      <a-form ref="formRef" :disabled="disabled" class="antd-modal-form">
        <p style="text-align: center">
          <span style="width: 35%; text-align: center; font: 1.7em sans-serif">{{ itemName }}检测原始记录</span>
        </p>
        
        <div v-if="formData.labRecordSamList.length > 0">
          <labSamTable ref="registerSamTable" :labRecordSamList="formData.labRecordSamList"></labSamTable>
        </div>
        <div v-if="formData.labRecordSamList.length > 0">
          <labDevTable ref="registerDevTable" :labRecordDevList="formData.labRecordDevList"></labDevTable>
        </div>
        <div v-if="formData.labRecordNormList.length > 0">
          <labNormTable ref="registerNormTable" :labRecordNormList="formData.labRecordNormList"></labNormTable>
        </div>
        <div v-if="formData.labRecordTargList.length > 0">
          <labTargTable ref="registeTargTable" :labRecordTargList="formData.labRecordTargList"></labTargTable>
        </div>
        <div v-if="formData.labRecordPerList.length > 0">
          <labPerTable ref="registerPerTable" :labRecordPerList="formData.labRecordPerList"></labPerTable>
        </div>
      </a-form>
    </a-spin>
    <template v-slot:footer>
      <a-button type="default" @click="closeModal"> 取消</a-button>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ref, reactive } from 'vue';
  import labSamTable from './subTables/LabCheckItemsSam.vue';
  import labDevTable from './subTables/LabCheckItemsDev.vue';
  import labNormTable from './subTables/LabCheckItemsNorm.vue';
  import labTargTable from './subTables/LabCheckItemsTarget.vue';
  import labPerTable from './subTables/LabCheckItemsPerson.vue';
  import { queryItemData } from '../LabItems.api';

  const registerSamTable = ref();
  const registerDevTable = ref();
  const registerNormTable = ref();
  const registeTargTable = ref();
  const registerPerTable = ref();
  const loading = ref(true);
  const itemName = ref('');
  const formRef = ref();
  const disabled = ref(false);
  const emit = defineEmits(['success']);
  const getTitle = ref('检测原始记录');
  const formData = reactive<Record<string, any>>({
    auditName: '',
    labRecordSamList: [],
    labRecordDevList: [],
    labRecordNormList: [],
    labRecordTargList: [],
    labRecordPerList: [],
  });

  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({
      minHeight: 500,
      showOkBtn: !data.disabled,
    });
    disabled.value = !data.disabled;
    itemName.value = data.record.name;
    let params = {
      itemId: data.record.id,
    };
    queryItemData(params)
      .then((res) => {
        formData.labRecordSamList = res.result.labTempSamList;
        formData.labRecordNormList = res.result.labTempNormList;
        formData.labRecordTargList = res.result.labTempTargList;
        formData.labRecordPerList = res.result.labTempPerList;
      })
      .finally(() => {
        loading.value = false;
      });
  });
</script>

<style scoped>
  .header {
    line-height: 35px;
    background-color: #f2f2f2;
    color: #666;
  }

  .tr {
    height: 50px;
    border: 1px solid #a8aeb2;
  }

  .thA {
    width: 20%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
  }

  .thB {
    width: 30%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
  }

  .thC {
    width: 8%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
  }

  .thD {
    width: 32%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
  }

  .thE {
    width: 25%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
  }

  .thF {
    width: 75%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
  }

  .input {
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
  }
</style>
